<template>
	<view class="container">
		<view class="header">
			<view class="">
				支付成功，请您前往指定门店消费
			</view>
			<view class="header_content">
				<view class="iconShop">
					<image src="/static/images/order/orderDetailWhiteShopIcon.png" mode=""></image>
				</view>
				<view class="header_text">
					<view>伟业汽车美容店(人民路店)</view>
					<view>山阳区人民路33号</view>
				</view>
				<view class="iconPlane">
					<image src="/static/images/order/orderDetailPlaneIcon.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="card_selection_one">
			<view class="title" style="padding:20rpx 15rpx;">
				订单详情
			</view>
			<view class="card_content_line" style="padding: 0rpx;"></view>
			<view class="text_one">
				<text>车辆精洗</text>
				<text>￥39.90</text>
			</view>
			<view class="text_one">
				<text>车辆附加费用</text>
				<text>0</text>
			</view>
			<view class="text_one">
				<text>原价</text>
				<text>￥59.90</text>
			</view>
			<view class="text_one">
				<text>店家优惠</text>
				<text class="color_orange">-￥20</text>
			</view>
			<view class="text_one">
				<text>优惠卷</text>
				<text class="color_orange">-￥10</text>
			</view>
			<view class="card_content_line" style="padding: 0rpx;"></view>
			<view class="text_one" style="padding:20rpx 15rpx;">
				<text>支付金额</text>
				<text class="color_green">-￥29.9</text>
			</view>
		</view>
		<view class="card_selection_two">
			<view class="title" style="padding:20rpx 15rpx;">
				订单详情
			</view>
			<view class="text_two">
				<text>订单号</text>
				<text>121212112487878</text>
			</view>
			<view class="text_two">
				<text>下单时间</text>
				<text>2020.01.08. 17:40</text>
			</view>
			<view class="text_two">
				<text>车辆</text>
				<text>奔驰FWE4/豫A98FHJ</text>
			</view>
			<view class="text_two">
				<text>备注:</text>
				<text></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	page {
		height: 100%;
		margin: 0;
		padding: 0;
		background: linear-gradient(to bottom, #3586FE 25%, #1067EA 25%, #F7F7F7 25%);

	}
	.container {
		margin-left: 25rpx;
		width: 700rpx;
	}

	.header {
		padding-left: 25rpx;
		padding-top: 40rpx;
		color: #fff;
	}

	.header_content image {
		width: 40rpx;
		height: 40rpx;
		padding-right: 16rpx;
		vertical-align: middle;
	}

	.header_content {
		display: flex;
		padding: 30rpx 0;

	}
	.header_text view:nth-child(2){
		line-height: 34rpx;
		font-size: 24rpx;
	}
	.iconPlane {
		margin-left: auto;
		padding-top: 22rpx;
		
	}
	.iconPlane image{
		height: 48rpx;
		width: 48rpx;
	}
	
	.iconShop image{
		height: 48rpx;
		width: 48rpx;
	}
	
/* selection1的样式 */
	.card_selection_one {
		background-color: #fff;
		border-radius: 30rpx;
	}
	.card_selection_one view{
		padding: 10rpx 15rpx;
		display: flex;
		justify-content: space-between;
	}
	.title{
		line-height: 25px;
		font-size: 18px;
		font-weight: 750;
	}
	.card_selection_one view:nth-child(4){
		border-bottom: 2rpx solid #F7F7F7;
	}
	.card_selection_one view:nth-child(6){
		border-bottom: 2rpx solid #F7F7F7;
	}
	.card_content_line {
		width: 670rpx;
		height: 2rpx;
		background-color: #F7F7F7;
		border: 4rpx solid #F7F7F7;
	}
	.color_orange{
		color: #FF6D43;
	}
	.color_green{
		color: #40D06E;
	}
	/* selection2的样式 */
	.card_selection_two {
		margin-top: 30rpx;
		background-color: #fff;
		border-radius: 30rpx;
		padding-bottom: 20rpx;
	}
	.card_selection_two view{
		padding: 10rpx 15rpx;
		display: flex;
		justify-content: space-between;
	}
</style>